<img class="lazy" src="https://img2.baidu.com/it/u=1744558263,856016303&fm=26&fmt=auto&gp=0.jpg"
  data-original="./imgs/1.jpg" width="640" height="480" alt="">
<hr>
<img class="lazy" src="https://img2.baidu.com/it/u=1744558263,856016303&fm=26&fmt=auto&gp=0.jpg"
  data-original="./imgs/2.jpg" width="640" height="480" alt="">
<hr>
<img class="lazy" src="https://img2.baidu.com/it/u=1744558263,856016303&fm=26&fmt=auto&gp=0.jpg"
  data-original="./imgs/3.jpg" width="640" height="480" alt="">
<hr>
<img class="lazy" src="https://img2.baidu.com/it/u=1744558263,856016303&fm=26&fmt=auto&gp=0.jpg"
  data-original="./imgs/4.jpg" width="640" height="480" alt="">
<hr>
<img class="lazy" src="https://img2.baidu.com/it/u=1744558263,856016303&fm=26&fmt=auto&gp=0.jpg"
  data-original="./imgs/5.jpg" width="640" height="480" alt="">

<hr>
<img src="https://img2.baidu.com/it/u=1744558263,856016303&fm=26&fmt=auto&gp=0.jpg" data-original="./imgs/5.jpg"
  width="640" height="480" alt="">

<script>
  function layerLoad() {
    let t = null
    if (t) return
    t = setTimeout(function () {
      t = null
      let h1 = window.innerHeight || document.documentElement.clientHeight  //可见视口的高度
      let h2 = document.body.scrollTop || document.documentElement.scrollTop //滚动条的高度
      let totalShowHeight = h1 + h2
      let imgObj = document.querySelectorAll("img")
      imgObj.forEach((item, index) => {
        let currentHeight = item.offsetTop
        if (totalShowHeight >= currentHeight) {
          item.src = item.getAttribute("data-original")
        }
      })
    }, 600)
  }
  layerLoad()
  window.onscroll = layerLoad
</script>